<template>
	
	<div class="comment_page">
		<div>
			<div class="rating-container">
			        <div 
			          class="stars-container" 
			          @mousemove="handleMouseMove"
			          @mouseleave="handleMouseLeave"
			          @click="setRating"
			        >
			          <div 
			            v-for="index in 5" 
			            :key="index" 
			            class="star"
			            :class="getStarClass(index)"
			            :data-rating="index"
			          >★</div>
			        </div>
			        
			        <div class="rating-value">{{ displayRating.toFixed(1) }} 星</div>
			        <div class="rating-text">{{ getRatingText() }}</div>
			      </div>
		</div>
		<a-row>
		  <a-col :span="24">
		    <a-textarea :rows="5" v-model:value="commentContent" />
		  </a-col>
		</a-row>
		<a-row style="margin-top: 10px">
		  <a-col :span="4" :offset="20">
		    <a-button type="primary" danger @click="replayTo">发布评论</a-button>
		  </a-col>
		</a-row>
	</div>
    
</template>
<script lang="ts" setup>
import { countGradeNumber,apiCommitComment,apiGetCourseStudyDetail } from "@/api/course";
import { addEvaluation } from "@/api/order";
import { onMounted, reactive, ref ,computed} from "vue";
import { getFileAccessHttpUrl } from "@/utils/compUtils";
import { useMessage } from "@/hooks/web/useMessage";
import { getTimeDiff } from "@/utils";
import { formatToDateTime } from "@/utils/dateUtil";
import { useWebStore } from "@/store";
import { useRoute,useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();
const courseId = route.params?.id ?? -1;
const commentContent = ref<any>();
const applauseRate: any = ref<number>(0);
const { createMessage, createConfirm } = useMessage();
const loading = ref<boolean>(false);
const webStore = useWebStore();
const userInfo = ref<any>({});


async function replayTo() {
  let params = {
    courseId: courseId,
    // parentId: currentComment.value.parentId ?? currentComment.value.id,
    commentContent: commentContent.value,
    isLike: false,
	ceScore: displayRating.value,
	grade:getRatingText(),
    likeCount: 0,
    createTime: formatToDateTime(new Date()),
    // replyId: currentComment.value.id,
    // replyUserId: currentComment.value.userId
  };
  console.log("提交的内容：",params)
  await apiCommitComment(params);
  commentContent.value = "";
  createMessage.success("评论成功");
  // getCommentList();
  router.push(`/course/onlineStudy/`+courseId)
}

async function getCourseDetail(){
	const data: any = await apiGetCourseStudyDetail(courseId);
}

onMounted(() => {
  userInfo.value = webStore.getUserInfo;
  
});


const rating = ref(0);
const hoverRating = ref(0);
const isHovering = ref(false);

// 计算显示的评分（悬停时显示悬停评分，否则显示实际评分）
const displayRating = computed(() => {
return isHovering.value ? hoverRating.value : rating.value;
});
// 处理鼠标移动事件
const handleMouseMove = (event) => {
  if (!event.target.classList.contains('star')) return;
  
  const star = event.target;
  const starIndex = parseInt(star.dataset.rating);
  const starRect = star.getBoundingClientRect();
  const mouseX = event.clientX - starRect.left;
  
  // 判断鼠标在星星的哪一半
  const isHalf = mouseX < starRect.width / 2;
  
  // 计算悬停评分
  hoverRating.value = starIndex - (isHalf ? 0.5 : 0);
  isHovering.value = true;
};

// 处理鼠标离开事件
const handleMouseLeave = () => {
  isHovering.value = false;
};

// 设置评分
const setRating = (event) => {
  if (!event.target.classList.contains('star')) return;
  
  const star = event.target;
  const starIndex = parseInt(star.dataset.rating);
  const starRect = star.getBoundingClientRect();
  const mouseX = event.clientX - starRect.left;
  
  // 判断鼠标在星星的哪一半
  const isHalf = mouseX < starRect.width / 2;
  
  // 设置评分
  rating.value = starIndex - (isHalf ? 0.5 : 0);
};

// 获取星星的类名
const getStarClass = (index) => {
  const currentRating = displayRating.value;
  
  if (index <= currentRating) {
	return 'active';
  } else if (index - 0.5 <= currentRating) {
	return 'half-active';
  }
  
  return '';
};

// 获取评分文本
const getRatingText = () => {
  const value = rating.value;
  
  if (value === 0) {
	return '请给出您的评分';
  } else if (value <= 1) {
	return '非常不满意';
  } else if (value <= 2) {
	return '不满意';
  } else if (value <= 3) {
	return '一般';
  } else if (value <= 4) {
	return '满意';
  } else {
	return '非常满意';
  }
};
</script>

<style scoped lang="scss">
@import "@/assets/style/course/global.scss";
.comment_page{
	width:1200px;
	margin: 20px auto;
}
.rating-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      margin-bottom: 30px;
	  .stars-container {
		display: flex;
		gap: 5px;
		position: relative;
		cursor: pointer;
		.star {
		  font-size: 3rem;
		  color: #e0e0e0;
		  position: relative;
		  transition: color 0.2s;
		  &.active{
			 color: #ffc107;  
		  }
		  &.half-active {
			  &::before{
				content: '★';
				position: absolute;
				left: 0;
				width: 50%;
				overflow: hidden;
				color: #ffc107;  
			  }
			  
			}
		}
		.rating-value {
		      font-size: 1.8rem;
		      font-weight: bold;
		      color: #333;
		      margin-top: 10px;
		    }
		    
		    .rating-text {
		      font-size: 1.2rem;
		      color: #666;
		      margin-top: 5px;
		    }
	  }
    }
</style>
